<template>
  <div class="layout-container">
    <div class="box">
      <el-tree ref="treeRef" class="my-tree" :data="routes" :props="defaultProps" node-key="menuId" highlight-current v-loading="loading"
        show-checkbox default-expand-all :expand-on-click-node="false" check-on-click-node @check="handleCheckChange">
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span>{{ data.meta.title }}</span>
          </span>
        </template>
      </el-tree>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, inject, watch } from 'vue'
import { getAll, update } from '@/api/system/auth'
import Layer from './layer.vue'
import { ElMessage } from 'element-plus'
import type { LayerInterface } from '@/components/layer/index.vue'
import { selectData, radioData } from './enum'
import { Plus, Search, Delete } from '@element-plus/icons'
import { useRouter } from "vue-router";
export default defineComponent({
  components: {
    Layer
  },
  setup() {
    // 弹窗控制器
    const layer: LayerInterface = reactive({
      show: false,
      title: '新增',
      showButton: true
    })
    const defaultProps = {
      children: "children",
      label: "path",
    };
    const treeRef = ref()
    const router = useRouter();
    const routes = router.options.routes.filter(r=>r.menuId);
    
    // 分页参数, 供table使用
    const page: Page = reactive({
      index: 1,
      size: 20,
      total: 0
    })
    const activeCategory: any = inject('active')
    const loading = ref(true)
    const tableData = ref([])
    const chooseData = ref([])
    const handleSelectionChange = (val: []) => {
      chooseData.value = val
    }
    const handleCheckChange = () => {
      var params = []
      var ids = treeRef.value.getCheckedKeys().concat(treeRef.value.getHalfCheckedKeys())
      ids.forEach(id => {
        let param = {
          department_Id: activeCategory.value.department_Id,
          menu_Id: id
        }
        params.push(param)
      });
      update(params)
        .then(res => {

        })
    }
    // 获取表格数据
    // params <init> Boolean ，默认为false，用于判断是否需要初始化分页
    const getTreeChecked = (init: boolean) => {
      loading.value = true
      // if (init) {
      //   page.index = 1
      // }
      // let params = {
      //   category: activeCategory.value.id,
      //   page: page.index,
      //   pageSize: page.size,
      //   ...query
      // }
      getAll()
        .then(res => {
          let data = res.data

          if (Array.isArray(data)) {
            // data.forEach(d => {
            //   const select = selectData.find(select => select.value === d.choose)
            //   select ? d.chooseName = select.label : d.chooseName = d.choose
            //   const radio = radioData.find(select => select.value === d.radio)
            //   radio ? d.radioName = radio.label : d.radio
            // })
            var keys = data.filter(d => d.department_Id === activeCategory.value.department_Id).map(o => o.menu_Id)
            keys = keys.filter(o=>!routes.map(r=>r.menuId).includes(o))
            treeRef.value.setCheckedKeys(keys, false)

          }
          // tableData.value = data
          //setcheckedkeys
        })
        .catch(error => {
        })
        .finally(() => {
          loading.value = false
        })
    }
    watch(activeCategory, (newVal) => {
      getTreeChecked(true)
    })
    return {
      Plus,
      Search,
      Delete,
      defaultProps,
      routes,
      treeRef,
      tableData,
      chooseData,
      loading,
      page,
      layer,
      handleSelectionChange,
      handleCheckChange,
      getTreeChecked
    }
  }
})
</script>

<style lang="scss" scoped>
.layout-container {
  width: calc(100% - 10px);
  height: 100%;
  margin: 0 0 0 10px;
}
</style>